<template>
	<div class="boxStyle">
		<el-row type="flex" class="row-bg" justify="start" style="margin-bottom: 10px;">
			<el-col :span="1" style="margin-top: 5px;padding-left: 10px;">订单号 :</el-col>
			<el-col :span="2">
				<el-input v-model="orderId" size="small"></el-input>
			</el-col>
			<el-col :span="1" style="margin-top: 5px;padding-left: 10px;">用户名 :</el-col>
			<el-col :span="2" style="margin-right: 10px;">
				<el-input v-model="nickName" size="small"></el-input>
			</el-col>
			<el-col :span="1" style="margin-top: 5px;padding-left: 10px;">卡券名 :</el-col>
			<el-col :span="2" style="margin-right: 10px;">
				<el-input v-model="goodsName" size="small"></el-input>
			</el-col>
			<el-col :span="2" style="margin-top: 5px;">手机号码 :</el-col>
			<el-col :span="2" style="margin-right: 10px;">
				<el-input v-model="mobile" size="small"></el-input>
			</el-col>
			<el-col :span="2" style="margin-top: 5px;margin-right:18px;">状态 :</el-col>
			<el-col :span="2" style="margin-left: -55px">
				<el-select v-model="status" placeholder="请选择" size="small">
					<el-option value="" label="全部"></el-option>
					<el-option v-for="item in typelists" :key="item.id" :label="item.name" :value="item.id">
					</el-option>
				</el-select>
			</el-col>
		</el-row>
		<el-row type="flex" class="row-bg" justify="start" style="margin-bottom: 10px;">
			<el-col :span="2" style="margin-top: 5px;padding-left: 5px;">订单开始时间 : </el-col>
			<el-col :span="6" style="margin-top: -3px;" id="com_date">
				<el-date-picker v-model="stime" type="datetimerange" range-separator="至 " start-placeholder="开始时间" end-placeholder="结束时间"></el-date-picker>
			</el-col>
			<el-col :span="1" style="margin-right:50px;margin-left: 50px;">
				<el-button type="warning" icon="el-icon-search" size="small" @click="search">查找</el-button>
			</el-col>
			<el-col :span="2" style="margin-right:50px;margin-left: 50px;">
				<el-button type="warning"  size="small" @click="orderListExport" :disabled="isDisabled">批量导出</el-button>
			</el-col>
		</el-row>
		<el-table :data="tableData" border style="width:100%;margin-bottom: 10px;">
			<el-table-column type="selection" width="50"></el-table-column>
			<el-table-column prop="orderId" label="订单号" width="200"></el-table-column>
			<el-table-column prop="name" label="卡券名称" width="150"></el-table-column>
			<el-table-column prop="nickName" label="用户" width="150"></el-table-column>
			<el-table-column prop="mobile" label="电话" width="120"></el-table-column>
			<el-table-column prop="num" label="数量" width="90"></el-table-column>
			<el-table-column label="价格" prop="orderPrice" width="90"></el-table-column>
			<el-table-column prop="createTime" label="购买时间" width="160" :formatter="dateFormat"></el-table-column>
			<el-table-column prop="remark" label="备注" width="90"></el-table-column>
			<el-table-column prop="status" label="状态" width="90">
				<template slot-scope="scope">
					<span v-if="scope.row.status==1">待支付</span>
					<span v-if="scope.row.status==2">已支付</span>
					<span v-if="scope.row.status==3">已关闭</span>
					<span v-if="scope.row.status==4">退款中</span>
					<span v-if="scope.row.status==5">已退款</span>
				</template>
			</el-table-column>
			<el-table-column label="操作" min-width="160">
				<template slot-scope="scope">
					<el-button size="mini" v-if="scope.row.status==2&&reShow!==-1" type="danger" @click="pointsReturn(scope.$index,scope.row.id)">退款</el-button>
				</template>
			</el-table-column>
		</el-table>
		<el-pagination background @current-change="handleCurrentChange" :current-page="currentPage" :page-size="size" layout="prev, pager, next,total, slot" :total="totals">
			<span style="margin-top: -2px;color: #606266;font-weight: 100;">第<el-input type="text" v-model="inputPage" style="width: 60px;margin: 0 5px;"/>页<el-button size="mini" style="background: #409EFF; color: #fff;margin:0 5px;" @click="handleCurrentChange(inputPage)">跳转</el-button><span>总计{{totalPage}}页</span></span>
		</el-pagination>
		<div class="modal fade" id="return" tabindex="-1" role="dialog" data-keyboard="false">
			<div class="modal-dialog" role="document">
				<div class="modal-content" style="width:950px;height:340px;">
					<div class="modal-header" style="border-radius: 4px;">
						<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
						<ul class="nav nav-tabs return" role="tablist">
							<li role="presentation" class="active">
								<a href="#returnInfo" aria-controls="returnInfo" role="tab" data-toggle="tab">退款申请</a>
							</li>
						</ul>
					</div>
					<div class="modal-body" style="padding-right: 60px;height:220px;overflow: hidden;overflow-y: auto;">
						<div class="tab-content">
							<div role="tabpanel" class="tab-pane active" id="returnInfo">
								<el-row type="flex" class="row-bg" justify="start" style="margin-bottom: 10px;">
									<el-form :model="returnIfo" label-width="100px" class="demo-ruleForm">
										<el-col :span="12">
											<el-form-item label="订单号 :" prop="orderId">
												<el-input v-model="returnIfo.orderId" :disabled="true" size="small"></el-input>
											</el-form-item>
										</el-col>
										<el-col :span="12">
											<el-form-item label="总金额：" prop="totalAmount">
												<el-input v-model="returnIfo.totalAmount" :disabled="true" size="small"></el-input>
											</el-form-item>
										</el-col>
										<el-col :span="12" id="reMoney">
											<el-form-item label="退款金额(*单位元)：" prop="reMoney">
												<el-input v-model="returnIfo.reMoney" size="small"></el-input>
											</el-form-item>
										</el-col>
										<el-col :span="12">
											<el-form-item label="备注：" prop="remark">
												<el-input v-model="returnIfo.remark" size="small"></el-input>
											</el-form-item>
										</el-col>
									</el-form>
								</el-row>
							</div>
						</div>
					</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-success" id="save" @click="save()">提交申请</button>
						<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
					</div>
				</div>
			</div>
			<div></div>
		</div>
	</div>
</template>

<script>
	import { formatDate } from 'static/js/date.js'
	import qs from "qs"
	import axios from "axios"
	export default {
		data() {
			return {
				orderId: "",
				nickName: "",
				goodsName: "",
				status: "",
				typelists: [{
						id: 1,
						name: "待支付"
					},
					{
						id: 2,
						name: "已支付"
					},
					{
						id: 3,
						name: "已关闭"
					},
					{
						id: 4,
						name: "退款中"
					},
					{
						id: 5,
						name: "已退款"
					}
				],
				tableData: [],
				inputPage: 1,
				totalPage: 1,
				currentPage: 1,
				totals: 0, //分页总条数
				size: 0, //每页条数
				purl: this.$store.state.purl, //权限数组
				stime: '', //开始时间
				mobile: "",
				reShow: 0,
				isDisabled: false,
				returnIfo: {
					orderId: "",
					nickName: "",
					totalAmount: "",
					remark: "",
					repoints: "",
					reMoney: ""
				},
				pointstype: "",
			}
		},
		activated() {
			this.orderId = "";
			this.nickName = "";
			this.goodsName = "";
			this.code = "";
			this.status = "";
			this.stime = "";
			this.mobile = "";
			this.returnIfo = {
				orderId: "",
				nickName: "",
				totalAmount: "",
				expend: "",
				remark: "",
				reMoney: ""
			};
			this.pointstype = "";
			this.currentPage = 1;
			this.load(1);
			this.tableData = [];
//			this.reShow = this.purl[0].findIndex((val) => val === "/interface/order/refund")
		},
		methods: {
			dateFormat(row, column) {
				var date
				if(row[column.property]) {
					date = new Date(parseInt(row[column.property]))
					date = formatDate(date, 'yyyy-MM-dd hh:mm:ss')
				}
				if(date == undefined) {
					return "";
				}
				return date;
			},
			load(num) {
				axios.get("/interface/order/list?pageNo=" + num).then((res) => {
					this.tableData = res.data.data.list; //list数据
					this.totals = res.data.data.pageBean.totalRow; //总条数
					this.size = res.data.data.pageBean.pageSize; //每页条数
					this.totalPage = res.data.data.pageBean.totalPage; //总页数
				})
			},
			orderListExport() {
				var that = this;
				this.isDisabled = true;
				var startTime
				var endTime
				if(this.stime != null && this.stime.length > 0) {
					startTime = formatDate(this.stime[0], 'yyyy-MM-dd hh:mm:ss');
					endTime = formatDate(this.stime[1], 'yyyy-MM-dd hh:mm:ss');
				} else {
					startTime = "";
					endTime = "";
				}
				axios.get('/interface/order/export', {
					params: {
						"stime": startTime,
						"etime": endTime,
						"orderId": this.orderId,
						"nickName": this.nickName,
						"goodsName": this.goodsName,
						"status": this.status,
						"mobile": this.mobile,
						"status":this.status
					},
					responseType: 'arraybuffer'
				}).then((response) => {
					//创建一个blob对象,file的一种
					let blob = new Blob([response.data], {
						type: 'application/x-xls'
					})
					let link = document.createElement('a')
					link.href = window.URL.createObjectURL(blob)
					link.download = '卡券订单.xls'
					link.click();
					that.isDisabled = false;
				})
			},
			handleCurrentChange(val) {
				this.currentPage = val - 0;
				this.inputPage = val;
				var startTime
				var endTime
				if(this.stime != null && this.stime.length > 0) {
					startTime = formatDate(this.stime[0], 'yyyy-MM-dd hh:mm:ss');
					endTime = formatDate(this.stime[1], 'yyyy-MM-dd hh:mm:ss');
				} else {
					startTime = "";
					endTime = "";
				}
				axios.post("/interface/order/list?", qs.stringify({
					stime: startTime,
					etime: endTime,
					orderId: this.orderId,
					nickName: this.nickName,
					goodsName: this.goodsName,
					status: this.status,
					mobile: this.mobile,
					pageNo: val
				})).then((res) => {
					this.tableData = res.data.data.list; //list数据
					this.totals = res.data.data.pageBean.totalRow; //总条数
					this.size = res.data.data.pageBean.pageSize; //每页条数
					this.totalPage = res.data.data.pageBean.totalPage; //总页数
				})
			},
			search() {
				var startTime;
				var endTime;
				if(this.stime != null && this.stime.length > 0) {
					startTime = formatDate(this.stime[0], 'yyyy-MM-dd hh:mm:ss');
					endTime = formatDate(this.stime[1], 'yyyy-MM-dd hh:mm:ss');
				} else {
					startTime = "";
					endTime = "";
				}
				axios.post("/interface/order/list?", qs.stringify({
					stime: startTime,
					etime: endTime,
					orderId: this.orderId,
					nickName: this.nickName,
					goodsName: this.goodsName,
					status: this.status,
					mobile: this.mobile,
					pageNo: 1
				})).then((res) => {
					if(res.data.code == 1) {
						this.tableData = res.data.data.list; //list数据
						this.totals = res.data.data.pageBean.totalRow; //总条数
						this.size = res.data.data.pageBean.pageSize; //每页条数 
						this.totalPage = res.data.data.pageBean.totalPage; //总页数
					} else {
						this.$message.error(res.data.msg)
					}
				})
			},
			pointsReturn(idx, id) {
				$("#return").modal("show")
				this.returnIfo.orderId = this.tableData[idx].orderId;
				this.returnIfo.totalAmount = this.tableData[idx].orderPrice;
				this.returnIfo.reMoney = "";
				this.returnIfo.remark = "";
			},
			save() {
				var reg = new RegExp("^[+-]?[0-9]+(.[0-9]{0,2})?$");
				if(this.returnIfo.reMoney == "" || this.returnIfo.reMoney == null) {
					this.$notify.error({
						title: '错误',
						message: '请输入退款金额'
					});
					return
				}
				if(this.returnIfo.reMoney > this.returnIfo.totalAmount) {
					this.$notify.error({
						title: '错误',
						message: '退款金额不能大于总金额'
					});
					return
				}
				if(!reg.test(this.returnIfo.reMoney)) {
					this.$notify.error({
						title: '错误',
						message: '退款金额只能为数字'
					});
					return
				}
				if(this.returnIfo.remark == "" || this.returnIfo.remark == null) {
					this.$notify.error({
						title: '错误',
						message: '备注不能为空'
					});
					return
				}
				axios.post("/interface/order/refund?", qs.stringify({
					orderId: this.returnIfo.orderId,
					price: this.returnIfo.reMoney,
					refundMes: this.returnIfo.remark,
				})).then((res) => {
					if(res.data.code == 1) {
						$("#return").modal("hide");
						this.search();
						this.$message.success("提交成功")
					} else {
						var msg = res.data.msg;
						$("#return").modal("hide");
						this.$alert(msg, '提示消息', {
							confirmButtonText: '确定',
							callback: action => {
								$("#return").modal("show");
							}
						});
					}
				});
			}
		}
	}
</script>

<style>
	#rePoints .el-form-item__label {
		width: 124px !important;
	}
	
	#rePoints .el-form-item__content {
		margin-left: 124px !important;
	}
	
	#reMoney .el-form-item__label {
		width: 140px !important;
	}
	
	#reMoney .el-form-item__content {
		margin-left: 140px !important;
	}
	
	.el-notification {
		z-index: 10056 !important;
	}
</style>